<template>
	<view>
		<!-- 背景图片 -->
		<user-head @changefollow="changefollow" @changebackimg="changebackimg" :user="user" :no="no"></user-head>
		<!-- 菜单 -->
		
		<paper-menu @closemask="closemask" @click="click"
		 @openmenu="openmenu"
		 @closemenu="closemenu" 
		 :menushow="menushow" 
		 :items="menulist"
		 ></paper-menu>
		
		<!-- 第二行 -->
		<view class=" user-two u-f-ajc ">
			<view class="u-f-ajc u-f-column ">
				<view class="user-two-top">
					10k
				</view>
				<view class="user-two-bottom">
					获赞
				</view>
			</view>
			<view class="u-f-ajc u-f-column">
				<view class="user-two-top">
					11
				</view>
				<view class="user-two-bottom">
					关注
				</view>
			</view>
			<view class="u-f-ajc u-f-column">
				<view class="user-two-top">
					12
				</view>
				<view class="user-two-bottom">
					粉丝
				</view>
			</view>
		</view>
		<!-- 下面的信息 -->
		<tab-swiper-head :swiperstly="swiperstly" :bottomstly="bottomstly" :tabIndex="tabIndex" :tabBars="tabBars" @tapTab="tap"></tab-swiper-head>
		<view class="uni-tab-bar" :style="{height:TabHeight+'px'}" >
		
		<swiper class="swiper-box" :current="tabIndex" @change='tabChange'  >
			<!-- 信息 -->
			<swiper-item  >
				<scroll-view scroll-y="true" class="list" @scrolltolower="lodemore(index)">
					<view class="user-info">
						<view class="user-info-top">
							<view class="user-info-top-title">
								账号信息
							</view>
							<view class="user-info-text">
								糗龄:<text>{{userinfo.uage}}</text>
							</view>
							<view class="user-info-text">
								糗百ID:<text>{{userinfo.id}}</text>
							</view>
						</view>
						<view class="user-info-top">
							<view class="user-info-top-title">
								个人信息
							</view>
							<view class="user-info-text">
								星族:<text>{{userinfo.constellation}}</text>
							</view>
							<view class="user-info-text">
								职业:<text>{{userinfo.job}}</text>
							</view>
							<view class="user-info-text">
								故乡:<text>{{userinfo.home}}</text>
							</view>
							<view class="user-info-text">
								情感:<text>{{userinfo.qinggan}}</text>
							</view>
						</view>
					</view>
			
				</scroll-view>
			</swiper-item>
			<!-- 动态 -->
			<swiper-item>
				<scroll-view  scroll-y="true" class="list" @scrolltolower="lodemore(index)"> 
				<block v-for="(item,index1) in guanzhulist.list" :key="index1">
					<common-list @guanzhu="guanzhu" @ding="ding" :item="item" :index="index1"></common-list>
					
				</block>
				<load-more></load-more>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view  scroll-y="true" class="list" @scrolltolower="lodemore(index)"> 
				<block v-for="(item,index1) in guanzhulist.list" :key="index1">
					<common-list @guanzhu="guanzhu" @ding="ding" :item="item" :index="index1"></common-list>
					
				</block>
				<load-more></load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		</view>
	</view>
</template>

<script>
	import userHead from '../../components/common/user-head.vue'
	import tabSwiperHead from '../../components/index/tab-swiper-head.vue'
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue'
		import paperMenu from '../../components/paper/paper-menu.vue'
	import time from '../../common/time.js'
	export default {
		components:{
			paperMenu,
			userHead,
			tabSwiperHead,
			commonList,
			loadMore
		},
		data() {
			return {
				//菜单显示
				menushow:false,
				TabHeight:0,
				no:1,
				swiperstly:'width: 33%;',
				tabIndex:0,
				menulist:[{
					type:'',
					icon:'',
					name:'拉黑',
				},
				{
					type:'',
					icon:'',
					name:'备注',
				}
				],
				
				bottomstly:{
					width: '60upx',
					marginLeft: '95upx'
				},
				userinfo:{
					uage:2011-12-12,
					id:123132,
					constellation :"水瓶座",
					job:'it',
					home:'广东',
					qinggan:'未婚'
				},
				
				tabBars: [{
				    name: '主页',
				    id: 'guanzhu',
					
				}, {
				    name: '糗事',
				    id: 'tuijian',
					
				}, {
				    name: '动态',
				    id: 'tiyu',
					
				}],
				user:{
					userimg:'../../static/demo/demo5.jpg',
					username:'蔡徐坤',
					usersex:'男',
					userage:12,
					isfollow:false
				},
				guanzhulist:{
					message:'上拉加载更多',
					list:[{
						//图片样式
						username:'我是昵称',
						userurl:'../../static/demo/datapic/10.jpg',
						userage:20,
						usersex:'女',
						isguanzhu:true,
						title:'我是图片',
						imgsrc:'../../static/demo/datapic/12.jpg',
						video:false,
						share:false,
						isimg:true,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22,
						isding:false
					},
					{
						//视频样式
						username:'我是昵称',
						userage:20,
						userurl:'../../static/demo/datapic/10.jpg',
						usersex:'男',
						isguanzhu:false,
						title:'我是视频',
						imgsrc:'../../static/demo/datapic/12.jpg',
						video:{
							playnum:20,
							time:'2:11'
						},
						share:false,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22					
					},
					
					{
						///文字格式
						username:'我是昵称',
						userage:20,
						userurl:'../../static/demo/datapic/10.jpg',
						usersex:'男',
						isguanzhu:false,
						title:'我是标题文字啊',
						imgsrc:'',
						video:false,
						share:false,
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22					
					},
					//分享
					{
						username:'我是昵称',
						userage:20,
						userurl:'../../static/demo/datapic/10.jpg',
						usersex:'男',
						isguanzhu:false,
						title:'我是分享啊',
						imgsrc:'',
						video:false,
						share:{
							shareimg:'../../static/demo/datapic/10.jpg',
							sharetitle:'我是分享的内容啊'
						},
						address:'深圳 龙岗',
						sharenum:22,
						talk:21,
						ding:22					
					}
					]
				}
			}
		},
		computed:{
			backimg(){
				return "../../static/bgimg/"+this.no+".jpg"
				
				
			}
		},
		//监视导航栏点击
		onNavigationBarButtonTap(e){
			console.log(e.index)
			switch (e.index){
				case 0:
				this.menushow=true
					break;
				case 1:
			
					break;	
				default:
					break;
			}
		},
		//监听加载
		onLoad() {
			//计算年龄
			
			/* this.userinfo.uage=time.gettime.sumAge(this.userinfo.uage) */
			//屏幕高度
			uni.getSystemInfo({
			    success:  (res) =>{
			      
			     let height=  res.windowHeight-uni.upx2px(100);
				 this.TabHeight=height;
			     
			    }
			});
		},
		methods: {
			click(index){
				console.log(index)
				this.menushow=false
			},
			//关闭遮罩层
			closemask(){
				this.closemenu=false
				console.log("点击了隐藏")
				
			},
			//点击清除
			tapclean(){
				console.log("点击了清除")
				this.closemenu()
			},
			tapadd(){
				console.log("点击了添加")
				this.closemenu()
			},
			//关闭菜单
			closemenu(){
				this.menushow=false
			},
			//打开
			openmenu(){
				this.menushow=true
				
			},
			lodemore(index){
				console.log(this.guanzhulist.message)
			
				if(this.guanzhulist.message!="上拉加载更多"){
					return
				}
				
				//创建一个虚拟对象
				this.guanzhulist.message="加载中"
				if(index==1){
					//加载话题
					setTimeout(()=> {
						let obj=	{
						img:'../../static/demo/demo6.jpg',
						title:'#我是新加载的#',
						text:'你是最棒的大傻逼',
						newnum:11,
						todaynum:1,
						id:1
					}
						
						this.latelyda.push(obj);
						this.guanzhulist.message="上拉加载更多"
					}, 1000);
					
				}else{
					//加载关注的
					setTimeout(()=> {
						let obj=	{
										//图片样式
										username:'我是昵称',
										userurl:'../../static/demo/datapic/10.jpg',
										userage:20,
										usersex:'女',
										isguanzhu:true,
										title:'我是图片',
										imgsrc:'../../static/demo/datapic/12.jpg',
										video:false,
										share:false,
										isimg:true,
										address:'深圳 龙岗',
										sharenum:22,
										talk:21,
										ding:22,
										isding:false
									}
						
						this.guanzhulist.list.push(obj);
						this.guanzhulist.message="上拉加载更多"
					}, 1000);
				}
				
				
				
			},
			//关注x
			guanzhu(index){
				
				//取消关注
				if(this.guanzhulist.list[index].isguanzhu){
					this.$refs.uToast.show({
						title: '取消关注成功',
						type: 'success',
						position:'top'
					})
				}else{
					this.$refs.uToast.show({
						title: '关注成功',
						type: 'success',
						position:'top'
					})
				}
				this.guanzhulist.list[index].isguanzhu=!this.guanzhulist.list[index].isguanzhu
			},
			//顶
			ding(index){
				
				if(this.guanzhulist.list[index].isding){
					this.guanzhulist.list[index].ding--;
				}else{
					this.guanzhulist.list[index].ding++;
				}
				this.guanzhulist.list[index].isding=!this.guanzhulist.list[index].isding
			},
			//切换tab
			tap(index){
			this.tabIndex=index	
			
			},
			//滑动tab
			tabChange(event){
				this.tabIndex=event.detail.current
				console.log(this.tabIndex)
			},
		//关注
		changefollow(){
			
			this.user.isfollow=!this.user.isfollow
		},
		//切换背景图
		changebackimg(){
	
			this.no<4?this.no++:this.no=1
		}
		},
	}
</script>

<style>
	.user-info-top{
		border-bottom: #EEEEEE 1upx solid;
	}
	.user-info-text{
		color: #AFAFAF;
		font-size: 30upx;
		margin-bottom: 15upx;
	}
	.user-info-top-title{
		font-size: 30upx;
		margin: 40upx 0;
	}
	.user-info{
		height: 1000upx;
		
		padding: 10upx 20upx;
	}
	.user-two{
		padding: 20upx 0;
		z-index: 10;
		border-top-left-radius: 25upx;
		border-top-right-radius: 25upx;
		background: #FFFFFF;
		position: relative;
		justify-content: space-around;
		border-bottom: 24upx #EEEEEE solid;
		margin-top: -13upx;
		
	}
	.user-two-top{
		height: 40upx;
		font-weight: bold;
	}
	.user-two-bottom{
		color: #BBBBBB;
		
		font-weight: bold;
	}
</style>
